<template>
  <div class="chinesePandemic">
    <el-row class="first_row row">
      <el-col class="echarts_item left_first_item" :span="12">
        <div id="china_map"></div>
      </el-col>
      <el-col class="echarts_item left_first_item" :span="12">
        <div id="province_map"></div>
      </el-col>
    </el-row>
    <el-row class="second_row row">
      <el-col class="echarts_item left_first_item" :span="12">
        <div id="china_Analysis"></div>
      </el-col>
      <el-col class="echarts_item left_first_item" :span="12">
        <div id="province_Analysis"></div>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
// import tools from '@/utils/tools.js'
import { ref, computed, reactive, getCurrentInstance, onMounted } from "vue";
import { getChineseData, getCovidChina, getCovidProvince } from "@/api";
import { useRouter } from "vue-router";
import { mapState, useStore } from "vuex";

const {
  appContext: {
    config: { globalProperties },
  },
} = getCurrentInstance();
let echarts = reactive(globalProperties.$echarts);
let activeProvince = ref("");
let provinceData = null;
let provinceList = [
  "北京市",
  "上海市",
  "重庆市",
  "天津市",
  "黑龙江省",
  "吉林省",
  "辽宁省",
  "河北省",
  "山西省",
  "青海省",
  "山东省",
  "河南省",
  "江苏省",
  "安徽省",
  "浙江省",
  "福建省",
  "江西省",
  "湖南省",
  "湖北省",
  "广东省",
  "台湾省",
  "海南省",
  "甘肃省",
  "陕西省",
  "四川省",
  "贵州省",
  "云南省",
  "内蒙古自治区",
  "新疆维吾尔自治区",
  "西藏自治区",
  "宁夏回族自治区",
  "广西壮族自治区",
];
let allData = [];
let provinceChart = reactive({});
let provinceAsChart = reactive({});
let cityData = [];
let chinaAsData = [];
const router = useRouter();
const store = useStore();
let getChinaData = (val) => store.dispatch("getData", val);
let getProvinceData = (val) => store.dispatch("getProvinceData", val);
let formatData = []
onMounted(() => {
  // getWorldMap()
  getData("china");
  //   getData('province');
});

let getData = (type) => {
  // getCovidChina().then(res => {
  // })
  getCovidProvince().then(res => {
    allData = res.data.data;
    renderChinaMap(allData);
    handleChinaData(allData);  //处理柱状图
    getChinaData(allData);  //储存全局中国疫情数据
  })
  // getChineseData().then((res) => {
  //   if (res.status == 200) {
  //     allData = res.data.data;
  //     renderChinaMap(allData);
  //     handleChinaData(allData);
  //     getChinaData(allData);
  //   }
  // });
};
let handleCityData = (data) => {
  cityData = data.map((item) => {
    return {
      name: item.name,
      adcode: item.adcode,
      mtime: item.last_update_time,
      dead: item.total_dead,
      confirm: item.total_confirm,
      heal: item.total_heal,
    };
  });
};
let handleChinaData = (data) => {
  // let cData = data.diseaseh5Shelf.areaTree[0].children;
  let cData = data;
  chinaAsData = cData.map((item) => {
    return {
      name: item.name,
      adcode: item.adcode,
      mtime: item.last_update_time,
      dead: item.total_dead,
      confirm: item.total_confirm,
      heal: item.total_heal,
    };
  });
  renderChinaAnalysis(chinaAsData);
};
let renderChinaMap = (data) => {
  var myChart = echarts.init(document.getElementById("china_map"), "white");
  var option = {
    title: {
      text: "\n\n中国地区累计确诊分布",
      left: "center",
      textStyle: {
        fontSize: 16,
        color: "rgba(255, 0, 0, 1)",
      },
    },
    tooltip: {
      //show:true,
      trigger: "item",
      formatter: function(params) {
			var toolTiphtml = params.data.allProvinceData.name +'<br>' + '累计确诊:' +params.data.allProvinceData.total_confirm+'<br>'+ '今日新增:'+params.data.allProvinceData.today_confirm 
			return toolTiphtml;
    }
    },
    visualMap: {
      //左侧小导航图标
      show: true,
      x: "left",
      y: "bottom",
      textStyle: {
        fontSize: 8,
      },
      splitList: [
        { start: 1, end: 9 },
        { start: 10, end: 99 },
        { start: 100, end: 999 },
        { start: 1000, end: 9999 },
        { start: 10000 },
      ],
      color: ["#8A3310", "#C64918", "#E55B25", "#F2AD92", "#F9DCD1"],
    },
    series: [
      {
        name: "累计确诊人数",
        type: "map",
        mapType: "china",
        roam: false, //禁用拖动和缩放

        itemStyle: {
          //图形样式
          normal: {
            borderWidth: 0.3, //区域边框宽度
            borderColor: "#009fe8", //区域边框颜色
            areaColor: "#ffefd5", //区域颜色
          },
          emphasis: {
            //鼠标滑过地图高亮的相关设置
            borderWidth: 0.5,
            borderColor: "#4b0082",
            areaColor: "#fff",
          },
        },
        label: {
          // 图形上的文本标签
          normal: {
            show: true, //省份名称
            fontSize: 10,
          },
          emphasis: {
            show: true,
            fontSize: 8,
          },
        },
        data: [], //[{'name':'上海'，'value':318},{'name':'江苏'，'value':308}]
      },
    ],
  };
  // var provinces = data.diseaseh5Shelf.areaTree[0].children;
  var provinces = data
  //鼠标移入
  myChart.on("mousemove", function (e) {
    
    provinceList.forEach((item) => {
      if (item.indexOf(e.data.name) > -1) {
        activeProvince = item;
        provinceData = require(`../../assets/json/province/${activeProvince}.json`);
        formatData = e.data.cityData.map((it) => {
          provinceData.features.forEach((item) => {
            if (item.properties.adcode == it.adcode) {
              it.name = item.properties.name;
            }
          });
          return it;
        });
        handleCityData(formatData);
        renderProvince(formatData, e.data.name);
        renderProvinceAnalysis();
      }
    });
  });
  //鼠标移出
  myChart.on("mouseout", function (e) {
    provinceChart.clear();
    provinceAsChart.clear();
  });
  //鼠标点击
  myChart.on("click", function (e) {
    provinceChart.clear();
    provinceAsChart.clear();
    getProvinceData({ cityData: formatData, name: e.data.name,adcode:e.data.allProvinceData.adcode });
    router.push("/provinceDetail");
  });
  for (var province of provinces) {
    option.series[0].data.push({
      name: province.name,
      value: province.total_confirm,
      cityData: province.children,
      allProvinceData: province,
    });
  }
  myChart.setOption(option);
};
let renderChinaAnalysis = (data) => {
  var myChart = echarts.init(
    document.getElementById("china_Analysis"),
    "white"
  );
  let options = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985",
        },
      },
    },
    legend: {
      data: ["确诊", "治愈", "死亡"],
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        //   boundaryGap: false,
        data: chinaAsData.map((it) => it.name).splice(6,18),
      },
    ],
    yAxis: {
      type: "value",
      axisLine: {
        show: true,
      },
      axisTick: {
        show: true,
      },
    },
    series: [
      {
        name: "确诊",
        type: "bar",
        //   stack: 'Total',
        barWidth: 12,
        areaStyle: {},
        emphasis: {
          focus: "series",
        },
        itemStyle: {
          color: "#6CA0F9",
        },
        data: chinaAsData.map((it) => it.confirm).splice(0, 8),
      },
      {
        name: "治愈",
        type: "bar",
        //   stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: "series",
        },
        itemStyle: {
          color: "#74ED9C",
        },
        data: chinaAsData.map((it) => it.heal).splice(0, 8),
      },
      {
        name: "死亡",
        type: "bar",
        barWidth: 18,
        //   stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: "series",
        },
        itemStyle: {
          color: "#DF9370",
        },
        data: chinaAsData.map((it) => it.dead).splice(0, 8),
      },
    ],
  };
  myChart.setOption(options, true);
};
let renderProvinceAnalysis = () => {
  provinceAsChart = echarts.init(
    document.getElementById("province_Analysis"),
    "white"
  );
  let options = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985",
        },
      },
    },
    legend: {
      data: ["确诊", "治愈", "死亡"],
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        //   boundaryGap: false,
        data: cityData.map((it) => it.name).splice(0, 6),
      },
    ],
    yAxis: {
      type: "value",
      axisLine: {
        show: true,
      },
      axisTick: {
        show: true,
      },
    },
    series: [
      {
        name: "确诊",
        type: "bar",
        //   stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: "series",
        },
        itemStyle: {
          color: "#6CA0F9",
        },
        data: cityData.map((it) => it.confirm).splice(0, 6),
      },
      {
        name: "治愈",
        type: "bar",
        //   stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: "series",
        },
        itemStyle: {
          color: "#74ED9C",
        },
        data: cityData.map((it) => it.heal).splice(0, 6),
      },
      {
        name: "死亡",
        type: "bar",
        barWidth: 18,
        //   stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: "series",
        },
        itemStyle: {
          color: "#DF9370",
        },
        data: cityData.map((it) => it.dead).splice(0, 6),
      },
    ],
  };
  provinceAsChart.setOption(options, true);
};
let renderProvince = (data, name) => {
  //获取到长度（每个省里有几个市）
  //调用我们通过json对象注册的地图
  echarts.registerMap("provinceMap", provinceData);
  provinceChart = echarts.init(
    document.getElementById("province_map"),
    "white"
  );
  var option = {
    title: {
      text: `\n\n${name}累计确诊分布`,
      left: "top",
      textStyle: {
        fontSize: 16,
        color: "rgba(255, 0, 0, 1)",
      },
    },
    tooltip: {
      //show:true,
      trigger: "item",
    },
    visualMap: {
      //左侧小导航图标
      show: false,
      x: "left",
      y: "bottom",
      textStyle: {
        fontSize: 8,
      },
      splitList: [
        { start: 1, end: 9 },
        { start: 10, end: 99 },
        { start: 100, end: 999 },
        { start: 1000, end: 9999 },
        { start: 10000 },
      ],
      color: ["#2353A7", "#4770B7", "#6F8CCA", "#BBC9E9", "#E8EBF5"],
    },
    series: [
      {
        name: "累计确诊人数",
        type: "map",
        mapType: "provinceMap",
        roam: false, //禁用拖动和缩放

        itemStyle: {
          //图形样式
          normal: {
            borderWidth: 0.3, //区域边框宽度
            borderColor: "#009fe8", //区域边框颜色
            areaColor: "#ffefd5", //区域颜色
          },
          emphasis: {
            //鼠标滑过地图高亮的相关设置
            borderWidth: 0.5,
            borderColor: "#4b0082",
            areaColor: "#fff",
          },
        },
        label: {
          // 图形上的文本标签
          normal: {
            show: true, //省份名称
            fontSize: 10,
          },
          emphasis: {
            show: true,
            fontSize: 8,
          },
        },
        data: [], //[{'name':'上海'，'value':318},{'name':'江苏'，'value':308}]
      },
    ],
  };

  var provinces = data;
  for (var province of provinces) {
    option.series[0].data.push({
      name: province.name,
      adcode: Number(province.adcode),
      value: province.total_confirm,
    });
  }
  provinceChart.setOption(option);
};
</script>
<style lang="scss" scoped>
.chinesePandemic {
  height: 100%;
  //   background: rgb(220, 157, 56);
  .row {
    height: 60%;
    .echarts_item {
      width: 50%;
      height: 100%;
      // padding: 10px;
      // background: skyblue;
      #china_map {
        width: 100%;
        height: 100%;
      }
      #province_map {
        width: 100%;
        height: 100%;
      }
      #china_Analysis {
        width: 100%;
        // background: purple;
        height: 100%;
      }
      #province_Analysis {
        width: 100%;
        // background: yellowgreen;
        height: 100%;
      }
    }
  }
  .second_row {
    height: 40%;
  }
}
</style>
